import React from 'react';
import { Drawer, Form, Row, Col, Image, Button, Card, ImageViewer } from 'tdesign-react';
import classnames from 'classnames';
import CommonStyle from 'styles/common.module.less';
import { getBLOG_CATEGORY_MAP } from './consts';
import IppeakImage from 'components/IppeakImage';

const { FormItem } = Form;

const labelWidth = 90;
const gutter: [number, number] = [16, 16];

export interface DetailDrawerProps {
  visible: boolean;
  onClose: () => void;
  data?: any;
}

const DetailDrawer: React.FC<DetailDrawerProps> = ({ visible, onClose, data }) => {
  const detail = data || {};
  const BLOG_ARTCLASSMAP = localStorage.getItem('BLOG_ARTCLASSMAP') ? JSON.parse(localStorage.getItem('BLOG_ARTCLASSMAP') || '') : [];
  const artClassZh = BLOG_ARTCLASSMAP.find((item:any) => item.value === data?.art_class)?.label  || '-';
  const artClassEN = BLOG_ARTCLASSMAP.find((item:any) => item.value === data?.art_class_en)?.labelEn  || '-';

  return (
    <Drawer
      visible={visible}
      onClose={onClose}
      header="博客文章详情"
      size="large"
      closeOnOverlayClick={false}
    footer={
      <>
        <Button theme="default" onClick={onClose}>
          关闭
        </Button>
      </>
    }
      placement="right"
      destroyOnClose
      className="sakura-drawer-wrapper"
      style={{ '--drawer-width': '45%' } as React.CSSProperties}
    >
      <div style={{ padding: 16 }}>
        <Form labelWidth={labelWidth} colon labelAlign="left">
          <Row gutter={gutter}>
            <Col span={6}>
              <FormItem label="分类-中文" name="art_class" labelWidth={labelWidth}>
                <span>{artClassZh}</span>
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="分类-英文" name="art_class_en" labelWidth={labelWidth}>
                <span>{artClassEN ?? '-'}</span>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="标题-中文" name="title" labelWidth={labelWidth}>
                <span>{detail?.title ?? '-'}</span>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="标题-英文" name="en_title" labelWidth={labelWidth}>
                <span>{detail?.en_title ?? '-'}</span>
              </FormItem>
            </Col>
           
            <Col span={12}>
              <FormItem label="关键词" name="keyword" labelWidth={labelWidth}>
                <span>{detail?.keyword ?? '-'}</span>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="描述" name="description" labelWidth={labelWidth}>
                <span>{detail?.description ?? '-'}</span>
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="配图" name="cover" labelWidth={labelWidth}>
                {detail?.cover ? (
                   <IppeakImage
                   src={detail.cover}
                   width={200}
                   height={100}
                   fit="cover"
                   shape="round"
                   alt="配图"
                 />
                ) : (
                  <span>-</span>
                )}
              </FormItem>
            </Col>
          
            <Col span={12}>
              <FormItem label="操作人" name="creator" labelWidth={labelWidth}>
                <span>{detail?.creator ?? '-'}</span>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="内容-中文" name="content" labelWidth={labelWidth}>
                <div className="detail-html" dangerouslySetInnerHTML={{ __html: String(detail?.content || '') }} />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="内容-英文" name="en_content" labelWidth={labelWidth}>
                <div className="detail-html" dangerouslySetInnerHTML={{ __html: String(detail?.en_content || '') }} />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="状态" name="status" labelWidth={labelWidth}>
                <span>{Number(detail?.status) === 0 ? '启用' : '禁用'}</span>
              </FormItem>
            </Col>
          </Row>
        </Form>

        <style>{`
          .detail-html img {
            width: 400px !important;
            height: 200px !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: cover;
            display: block; /* 独占一行 */
            margin: 8px 0; /* 与上下内容留白 */
          }
        `}</style>

      
      </div>
    </Drawer>
  );
};

export default DetailDrawer;
